			<?
				global $file;
			?>
			<br /><br />
			<!--- Right then !-->
			<div id="ToolBox">
				<div id="finfo" class="infobox">
					<label class="collapser"><?=$file->basename?></label>
					<div>
						<div>
							<div style="text-align:right">
								<em class="helvetica"><?=$file->mime?>,<br /> <span id="filesize"></span></em>
							</div>
							<? if($file->rdk == 'docs'){ ?> 
								<div style="text-align:right">
								<a href="<?=$file->uri()?>" target="_blank">Preview</a>
								</div>	
							<?	} ?>
							<em style="color:#666">Editing:</em> 
							<div style="text-align:right">
								<h4><strong id="draftno" style="text-align:right; color:#F39" class="helvetica">Original file</strong></h4>
							</div>
							<div style="margin-top:3px">
								<em style="color:#666">Updated:</em> <br />
									<div id="file_updated" style="text-align:right" class="helvetica"></div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- SAVE !-->
				<div id="view_save">
					<div id="savebox" class="infobox">
						<label class="collapser">Save</label>
						<div>
							<div>
								<div style="padding:5px 5px 0 10px">
									<input id="as_chk" type="checkbox" /> <em>Autosave</em>
								</div>
								<div id="as_inp" style="text-align:right; opacity:0.3">
									every <input id="as_mins" type="text" value="2" style="font-size:0.8em; width:2em; color:red" disabled="disabled" /> minutes
								</div>
								<div class="btnwrapper">
									<input type="button" id="save" value="Save" onclick="File.save()" />  <input type="button" onclick="File.saveAs()" value="Save As..." />
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- TEMPLATE !-->
				<div id="templatebox" class="infobox">
					<label class="collapser">Template</label>
					<div>
						<div>
							<div id="tmpl" style="display:none;">
								<div style="background-image:url(<?=$this->icon('script.png', 32)?>); width:32px; height:32px; float:left"></div>
									<span id="tmplfmrp"></span>
							</div>
							<div class="btnwrapper">
								<input type="button" value="Link" id="lnkbtn" onclick="File.linkTemplate()" />
							</div>
						</div>
					</div>
				</div>
						
				<!-- TOOLS !-->			
				<div id="view_tools" class="infobox">
					<label class="collapser">Tools</label>
					<div>
						<div>
							<div class="toolButton" id="cropTooldiv" style="background-image:url(<?=$this->icon('crop.png', 'imgtools')?>)"  onclick="initTool('Crop')">
								Crop
							</div>
						
							<div class="toolButton" id="resizeTooldiv" style="background-image:url(<?=$this->icon('resize.png', 'imgtools')?>)"  onclick="initTool('Resize')">
								Resize
							</div>
							
							<div class="toolButton" id="rotateTooldiv" style="background-image:url(<?=$this->icon('rotate.png', 'imgtools')?>)" onclick="initTool('Rotate')">
								Rotate
							</div>
							
							<div class="toolButton" id="flipTooldiv" style="background-image:url(<?=$this->icon('flip.png', 'imgtools')?>)" onclick="initTool('Flip')">
								Flip
							</div>
							
							<div class="toolButton" id="colorTooldiv" style="background-image:url(<?=$this->icon('color.png', 'imgtools')?>)" onclick="initTool('Color')">
								Color
							</div>
						</div>
					</div>
				</div>
					
				<!-- DRAFTS WRAPPER !-->
				<div id="candraft" style="border-top:1px dashed #ccc; margin-top:5px; padding-top:5px">
					<!-- DRAFTS !-->
					<div id="draftsbox" class="infobox">
						<label class="collapser">Drafts</label>
						<div>
							<div>
								<div id="draftslist" class="helvetica" style="margin-top:5px">
								
								</div>
								<div class="btnwrapper">
									<input type="button" value="New Draft" onclick="File.newDraft()" />
								</div>
							</div>
						</div>
					</div>
					
					<div id="hasdrafts" style="display:none">
						<!-- USURP !-->
						<div id="usurpbox" class="infobox">
							<label class="collapser">Usurp <sup id="usrpbull">&bull;</sup></label>
							<div>
								<div>
									<div class="btnwrapper">
										<input type="button" id="usurpbtn" value="Usurp!" onclick="File.usurp()" />
									</div>
								</div>
							</div>
						</div>
						<!-- DONE !-->
						<div id="donebox" class="infobox">
							<label class="collapser">Done?</label>
							<div>
								<div>
									<div class="btnwrapper">
										<input type="button" value="Overwrite Original" onclick="File.overwrite()" />
									</div>
								</div>
							</div>
						</div>
						<!-- DISCARD !-->
						<div id="discardbox" class="infobox">
							<label class="collapser">Discard</label>
							<div>
								<div>
									<div class="btnwrapper">
										<input type="button" value="Discard Draft" onclick="Drafts.discard()" />
									</div>
									<div class="btnwrapper">
										<input type="button" value="Discard All Drafts" onclick="Drafts.discard(1)" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>			
			</div><!-- /TOOLBOX !-->
			
			<div id="CropToolBox" class="infobox"  style="display:none">
				<div class="toolTitle">
					<img src="<?=$this->icon('crop.png', 'imgtools')?>" /> 
					<h3>Crop:</h3><br />
				</div>
				<br />
				<small><em class="nixtext">just drag the mouse</em></small>
				<div align="right">
					<div id="cropNotify" style="display:none" class="nixtext">
						<br />Crop dimensions: <strong>
						<br />
						<span id="cropX"></span> x <span id="cropY"></span></strong>
						<br />
					</div>
					<br />
					<input type="button" value="Cancel" onclick="resetTools()" /> 
					<input type="button" value="Apply" id="apply_Crop" onclick="File.newDraft()" />
				</div>
			</div>
				
			<div id="ResizeToolBox" class="infobox"  style="display:none">
				<div class="toolTitle">
					<img src="<?=$this->icon('resize.png', 'imgtools')?>" /> 
					<h3>Resize:</h3>
				</div>
				<br /><br />
				<input type="checkbox" id="constrain" value="1" checked="checked" /> <em>Constrain?</em>					
				<div id="resizeTools" class="nixtext">			
					<label for="resize_wpc">X:</label> <input name="resize_wpc" type="text" id="resize_wpc" value="100" size="2"  />
					<select name="resize_wu" id="resize_wu">
						<option value="">%</option>
						<option value="1">px</option>
					</select>
					<div class="resizePC"></div>
					<div id='resizeTrackW' class="track">
						<div id='resizeHandleW' class="handle">
						</div>
					</div>
					
					<label for="resize_hpc">Y:</label> <input name="resize_hpc" type="text" id="resize_hpc" value="100" size="2"  />
					<select name="resize_hu" id="resize_hu">
						<option value="">%</option>
						<option value="1">px</option>
					</select>
					
					<div class="resizePC"></div>
					<div id='resizeTrackH' class="track">
						<div id='resizeHandleH' class="handle">
						</div>
					</div>
					<div style="text-align:right">	
						<a href="javascript:if(imgstate.resize) imgstate.resize.reset();">reset</a> <br /><br />
						<input type="button" value="Cancel" onclick="resetTools()" /> 
						<input type="button" value="Apply" id="apply_Resize" onclick="File.newDraft()" />
					</div>
				</div>
			</div>
				
			<div id="RotateToolBox" class="infobox" style="display:none">
				<div class="toolTitle">
					<img src="<?=$this->icon('rotate.png', 'imgtools')?>" /> 
					<h3>Rotate:</h3>
				</div>
				<div style="margin:10px 0 10px 15px" class="nixtext">
					<input type="radio" name="rotate" value="90" onchange="RotateEval()" /> 90&deg;<br />
					<input type="radio" name="rotate" value="180" onchange="RotateEval()" /> 180&deg;<br />
					<input type="radio" name="rotate" value="270" onchange="RotateEval()" /> 270&deg;
				</div>
				<div align="right">
					<input type="button" value="Cancel" onclick="resetTools()" /> 
					<input type="button" value="Apply" id="apply_Rotate" disabled="disabled" onclick="File.newDraft()" />
				</div>
			</div>
				
			<div id="FlipToolBox" class="infobox" style="display:none">
				<div class="toolTitle">
					<img src="<?=$this->icon('flip.png', 'imgtools')?>" /> 
					<h3>Flip:</h3>
				</div>
				<div style="margin:10px 0 10px 15px" class="nixtext">
					<input type="checkbox" id="flip_horizontal" onchange="FlipEval()" /> Horizontal<br />
					<input type="checkbox" id="flip_vertical" onchange="FlipEval()" /> Vertical
				</div>
				<div align="right">
					<input type="button" value="Cancel" onclick="resetTools()" /> 
					<input type="button" value="Apply" id="apply_Flip" disabled="disabled" onclick="File.newDraft()" />
				</div>
			</div>
				
			<div id="ColorToolBox" class="infobox" style="display:none">
				<div class="toolTitle">
					<img src="<?=$this->icon('color.png', 'imgtools')?>" /> 
					<h3>Color:</h3>
				</div>
				
				<div style="margin:10px 5px" class="nixtext">
					<input type="checkbox" id="grayscale" value="grayscale" onchange="colorEval(this)" /> Grayscale<br />
					<input type="checkbox" id="negative" value="negative" onchange="colorEval(this)" /> Negative
				</div>
				<br />
				<div style="text-align:right; padding-right:5px" class="nixtext">
					Brightness:		<input id="Brightness" type="text" size="3" style="color:#f00" value="0" onchange="colorEval(this)" />
				</div>
				<div id='BrightnessTrack' class="track">
					<div id='BrightnessHandle' class="handle">
					</div>
				</div>
				
				<div style="text-align:right; padding-right:5px" class="nixtext">
					Contrast:		<input id="Contrast" type="text" size="3" style="color:#f00" value="0" onchange="colorEval(this)" />
				</div>
				<div id='ContrastTrack' class="track">
					<div id='ContrastHandle' class="handle">
					</div>
				</div>
					
				<div align="right" class="nixtext">
					<a href="javascript:imgstate.colorreset()">reset</a>
					<br /><br /><br />
					<input type="button" value="Cancel" onclick="resetTools()" /> 
					<input type="button" value="Apply" id="apply_Color" disabled="disabled" onclick="File.newDraft()" />
				</div>
			</div>
		